<template>
  <div class="container">
    <!-- 选择器与输入框 -->
    <div class="choose">
      <!-- 选择器部分 -->
      <div class="choose-left">
        <!-- 状态筛选-选择器 -->
        <div class="selector">
          <span>状态筛选</span>
          <el-select
            v-model="stateValue"
            class="m-2 select"
            placeholder="Select"
          >
            <el-option
              v-for="item in stateFilter"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- 优惠券类型-选择器 -->
        <div class="selector">
          <span>优惠券类型</span>
          <el-select
            v-model="cheapValue"
            class="m-2 select"
            placeholder="Select"
          >
            <el-option
              v-for="item in cheapFilter"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- 商品名称-输入框 -->
        <div class="selector">
          <span>商品名称</span>
          <el-input v-model="shopName" placeholder="请输入" class="select" />
        </div>
      </div>
      <div class="choose-right">
        <el-button @click="query">查询</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 增删改查按钮 -->
    <div class="btn">
      <el-button @click="add">+ 新增优惠券</el-button>
      <el-button @click="moreOverBtn">批量终止</el-button>
      <el-button @click="open2">批量删除</el-button>
    </div>
    <!-- 表格渲染 -->
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      class="tableBox"
      @select="moreOver"
      @select-all="moreAll"
    >
      <el-table-column type="selection" />
      <el-table-column prop="name" label="优惠券名称">
        <template #default="scope">
          <el-input v-model="input1.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="mode" label="方式" width="130">
        <template #default="scope">
          <el-input v-model="input2.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="date" label="领取时间" width="300">
        <template #default="scope">
          <el-input v-model="input3.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="use" label="使用条件">
        <template #default="scope">
          <el-input v-model="input4.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="num" label="已领/总量">
        <template #default="scope">
          <el-input v-model="input5.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="grant" label="发放平台">
        <template #default="scope">
          <el-input v-model="input6.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="state" label="状态">
        <template #default="scope">
          <el-input v-model="input7.value" v-if="scope.row.change" />
        </template>
      </el-table-column>
      <el-table-column prop="change" label="操作" width="180">
        <template #default="scope">
          <el-button
            v-if="scope.row.change"
            @click="change2(scope.$index, scope.row)"
            >确定</el-button
          >
          <!--@click=" modify(scope.$index, scope.row) "-->
          <el-button v-else @click="change1(scope.$index, scope.row)"
            >修改</el-button
          >

          <el-button
            v-if="scope.row.change"
            @click="cancel(scope.$index, scope.row)"
            >取消</el-button
          >
          <el-button v-else @click="open(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 25]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout=" prev, pager, next,sizes, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox, ElTable } from "element-plus";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter();
    //新增
    const add = () => {
      router.push("/home/addcoupon");
    };
    //多选
    interface User {
      id: string;
      name: string;
      mode: string;
      date: string;
      use: string;
      num: string;
      grant: string;
      state: string;
    }

    const multipleTableRef = ref<InstanceType<typeof ElTable>>();
    const multipleSelection = ref<User[]>([]);
    const handleSelectionChange = (val: User[]) => {
      multipleSelection.value = val;
    };

    // 批量-选择
    const moreOver = (selection: any, row: any) => {
      store.commit("coupon/moreOver", row.id);
    };
    // 批量-全选
    const moreAll = (selection: any) => {
      console.log(selection);

      store.commit("coupon/moreAll", selection);
    };
    // 批量终止
    const moreOverBtn = () => {
      store.commit("coupon/moreOverBtn");
    };
    // 批量删除
    const open2 = (index: number, row: any) => {
      ElMessageBox.confirm("订单删除后不可恢复，是否删除订单?", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        center: true,

        // type: "warning",
      })
        .then(() => {
          store.commit("coupon/removeCoupon2");
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    };

    // 数据请求
    onMounted(() => {
      store.dispatch("coupon/getcouponAsync");
    });
    // 状态筛选-选择器
    const stateFilter = ref([
      {
        value: "",
        label: "全部",
      },
      {
        value: "进行中",
        label: "进行中",
      },
      {
        value: "已失效",
        label: "已失效",
      },
    ]);
    const stateValue = ref("");

    // 状态筛选-选择器
    const cheapFilter = ref([
      {
        value: "",
        label: "全部",
      },
      {
        value: "发放",
        label: "发放",
      },
      {
        value: "领取",
        label: "领取",
      },
    ]);
    const cheapValue = ref("");

    // 商品名称-输入框
    const shopName = ref("");
    //表格,vuex引入,添加判断条件
    const tableData = computed(() => store.state.coupon.couponList);
    //查询
    const query = () => {
      let obj: any = {
        state: stateValue.value,
        mode: cheapValue.value,
        name: shopName.value,
      };

      return store.commit("coupon/checkCoupon", obj);
    };
    //重置
    const reset = () => {
      stateValue.value = "";
      cheapValue.value = "";
      shopName.value = "";
      store.dispatch("coupon/getcouponAsync");
    };
    // 删除弹出框
    const open = (index: number, row: any) => {
      ElMessageBox.confirm("订单删除后不可恢复，是否删除订单?", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        center: true,

        // type: "warning",
      })
        .then(() => {
          store.commit("coupon/removeCoupon", row.id);
          ElMessage({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "取消删除",
          });
        });
    };

    //修改效果
    let input1 = ref("");
    let input2 = ref("");
    let input3 = ref("");
    let input4 = ref("");
    let input5 = ref("");
    let input6 = ref("");
    let input7 = ref("");
    const change1 = (index: number, row: any) => {
      row.change = !row.change;
      input1.value = ref(row.name);
      input2.value = ref(row.mode);
      input3.value = ref(row.date);
      input4.value = ref(row.use);
      input5.value = ref(row.num);
      input6.value = ref(row.grant);
      input7.value = ref(row.state);
    };
    const change2 = (index: number, row: any) => {
      row.change = !row.change;

      row.name = input1.value;
      row.mode = input2.value;
      row.date = input3.value;
      row.use = input4.value;
      row.num = input5.value;
      row.grant = input6.value;
      row.state = input7.value;
      store.commit("coupon/change", row);
    };
    const cancel = (index: number, row: any) => {
      row.change = !row.change;
    };
    // let newRow: any = ref({
    //   name: "",
    //   mode: "",
    //   date: "",
    //   use: "",
    //   num: "",
    //   grant: "",
    //   state: "",
    // });
    // let input1 = ref(newRow.value.name);
    // let input2 = ref(newRow.value.mode);
    // let input3 = ref(newRow.value.date);
    // let input4 = ref(newRow.value.use);
    // let input5 = ref(newRow.value.num);
    // let input6 = ref(newRow.value.grant);
    // let input7 = ref(newRow.value.state);
    // let change1 = (index: number, row: any) => {
    //   row.change = !row.change;
    //   newRow = row;
    // };
    // let change2 = (index: number, row: any) => {
    //   row = newRow;
    //   store.commit("coupon/change", row);
    // };

    //分页
    const currentPage = computed(() => store.state.coupon.currentPage);
    const pageSize = computed(() => store.state.coupon.pageSize);
    const small = ref(false);
    const background = ref(false);
    const disabled = ref(false);
    const pageTotal = computed(() => store.state.coupon.pageTotal);
    //当前页面数据量
    const handleSizeChange = (val: number) => {
      console.log(`${val} 条数据`);
      return store.commit("coupon/pageSizeChange", val);
    };

    // 当前页数改变
    const handleCurrentChange = (val: number) => {
      console.log(`当前页: ${val}`);
      return store.commit("coupon/pageCurrentChange", val);
    };

    return {
      // 状态筛选-选择器
      stateFilter,
      stateValue,
      // 状态筛选-选择器
      cheapFilter,
      cheapValue,
      //输入框
      shopName,
      query,
      reset,
      //表格
      tableData,
      open,
      //分页
      pageTotal,
      currentPage,
      pageSize,
      small,
      background,
      disabled,
      handleSizeChange,
      handleCurrentChange,
      //新增效果
      add,
      //修改效果
      input1,
      input2,
      input3,
      input4,
      input5,
      input6,
      input7,
      change1,
      change2,
      cancel,
      //多选效果
      multipleTableRef,
      multipleSelection,
      handleSelectionChange,
      // 批量选择
      moreOver,
      moreAll,
      moreOverBtn,
      open2,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 16px 14px 16px 18px;
}
//选择器
.choose {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
  .choose-left {
    display: flex;
    align-items: center;
    .selector {
      margin-right: 32px;
      display: flex;
      align-items: center;

      .select {
        width: 176px;
        height: 32px;
        background: #ffffff;
        border-radius: 5px;
        margin-left: 14px;
      }
    }
  }
  .choose-right {
    button {
      width: 89px;
      height: 32px;
      // background: #ffa79c;
      border-radius: 5px;
      margin-right: 15px;
    }
  }
}
// 按钮
.btn {
  padding-top: 23px;
  button {
    margin-right: 16px;
  }
}
// 表格
.tableBox {
  margin-top: 51px;
  width: 100%;
}
// 分页
.demo-pagination-block {
  margin: 51px auto 0;
  width: 612px;
}
/deep/.el-table__header-wrapper .el-table__cell {
  background: #fff0ee;
  font-size: 18px;
  color: #666;
  height: 40px;
}
.el-button:hover {
  background: #ffa79c;
  color: #fff;
  border: 1px solid #ffa79c;
}
.el-button:focus {
  background: #ffa79c;
  color: #fff;
  border: 1px solid #ffa79c;
}
</style>
